<template>
  <div>
    <el-table
      :data="list"
      style="width: 100%;"
      row-key="id"
      border
      lazy
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <el-table-column prop="id" label="菜单编号"></el-table-column>
      <el-table-column prop="title" label="菜单名称"></el-table-column>
      <el-table-column prop="icon" label="菜单图标">
        <template slot-scope="scope">
           <i :class="scope.row.icon"></i>
        </template>
      </el-table-column>
      <el-table-column prop="url" label="菜单地址"></el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          <el-button type="primary" @click="start(scope.row.id)">启动</el-button>
          <el-button type="primary" @click="ban(scope.row.id)" v-if="scope.row.status==2">禁止</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" @click="compile(scope.row.id)">编辑</el-button>
          <el-button type="danger" @click="del(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { reqmenulist, reqmenudelete } from "../../../request/api";
export default {
  data() {
    return {
    };
  },
  props: ["flag","list"],
  component: {},
  methods: {
    //编辑
    compile(id){
      this.$emit("one",id)
    },
    // 删除
    del(id) {
      this.$confirm("删除后将无法恢复，是否继续删除?", "提示", {
        confirmButtonText: "删除",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!"
          });
          reqmenudelete({ id: id }).then(res => {
            if (res.data.code == 200) {
              this.$emit("req");
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    //启动
    start(id) {},
    //禁止
    ban(id) {}
  },
  mounted() {
  }
};
</script>
<style lang="less" scoped>
</style>